<template>
  <div class="bar-menu">
    <div class="top">
      <div class="avatar" @click.stop="handleClick('用户')">
        <!-- <img src="../../../../assets/images/默认头像.png" alt="" /> -->
        <el-avatar v-if="userInfo.avatar" size="large" :src="userInfo.avatar"></el-avatar>
        <el-avatar v-else size="large" :src="avatar"></el-avatar>
      </div>
      <div class="item" v-for="(item, idx) in menuList" :key="idx" @click.stop="handleClick(item.label)">
        <Icon :icon-name="item.icon" className="icon-class" />
        <div class="title">
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="operation">
        <el-tooltip class="item" effect="dark" content="切歌" placement="bottom-start">
          <Icon @click="handleChangeSong" icon-name="iconqiege" className="icon-class" />
        </el-tooltip>
        <Icon @click="setEnableOrDisableVolume" @mouseover="handleChangeVolume" :icon-name="volumeIcon" className="icon-class" />
        <el-slider
          class="bbbug_main_menu_song_volume_bar"
          v-if="isVolumeBarShow"
          v-model="audioVolume"
          vertical
          show-stops
          @change="audioVolumeChanged"
          height="80px"
        >
        </el-slider>
      </div>
      <div class="song-pic" @click.stop="handleClick('音乐')">
        <progress-circle :percent="percent"> </progress-circle>
        <img v-if="songInfo.picUrl" :src="songInfo.picUrl" alt="" />
        <img v-else :src="defaultImg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  emits: ['handleClick'],
  setup(prop, { emit }) {
    const store = useStore()
    const defaultImg = require('../../../../assets/images/黑胶.png')
    let userInfo = computed(() => {
      return store.getters.userInfo
    })
    let volumeIcon = computed(() => {
      if (state.audioVolume == 0) {
        return 'iconjingyin1'
      } else {
        return 'iconyinliang'
      }
    })
    const avatar = require('../../../../assets/images/默认头像.png')
    const state = reactive({
      changeLoading: false,
      menuList: [
        {
          icon: 'icondiange',
          label: '点歌'
        },
        {
          icon: 'iconziyuan21',
          label: '已点'
        },
        {
          icon: 'iconplaylist',
          label: '最新'
        },
        {
          icon: 'iconlishi',
          label: '历史'
        }

        // {
        //   icon: 'iconfangjianrenshu',
        //   label: '房间'
        // }
      ],
      isVolumeBarShow: false,
      audioVolume: 100,
      timerVolumeBar: null
    })
    const initVolume = () => {
      let volume_old = localStorage.getItem('volume_old')
      if (volume_old) {
        state.audioVolume = Number(volume_old)
        store.commit('SET_STATE', {
          key: 'volume',
          value: state.audioVolume
        })
      }
    }
    initVolume()
    let songInfo = computed(() => {
      return store.getters.songInfo
    })
    let percent = computed(() => {
      return Number(store.getters.percent / 100)
    })
    const handleClick = label => {
      store.commit('SET_STATE', {
        key: 'cardShow',
        value: true
      })
      emit('handleClick', label)
    }
    const handleChangeSong = async () => {
      // store.commit('playNextSong')
      if (state.changeLoading == true) return
      state.changeLoading = true
      await store.dispatch('_postDelSongOrder')
      state.changeLoading = false
    }
    const handleChangeVolume = () => {
      state.isVolumeBarShow = true
      hideVolumeBarAfter5seconds()
    }
    const setEnableOrDisableVolume = () => {
      state.isVolumeBarShow = true
      if (state.audioVolume > 0) {
        //设置静音
        localStorage.setItem('volume_old', state.audioVolume)
        state.audioVolume = 0
        store.commit('SET_STATE', {
          key: 'volume',
          value: state.audioVolume
        })
      } else {
        //取消静音
        let volume = localStorage.getItem('volume_old') || 50
        if (volume == 0) {
          volume = 100
          localStorage.setItem('volume_old', 100)
        }
        volume = parseInt(volume)
        state.audioVolume = volume
        store.commit('SET_STATE', {
          key: 'volume',
          value: volume
        })
      }
      hideVolumeBarAfter5seconds()
    }
    const audioVolumeChanged = v => {
      store.commit('SET_STATE', {
        key: 'volume',
        value: v
      })
      localStorage.setItem('volume_old', v)
      hideVolumeBarAfter5seconds()
    }
    const hideVolumeBarAfter5seconds = () => {
      clearTimeout(state.timerVolumeBar)
      state.timerVolumeBar = setTimeout(() => {
        state.isVolumeBarShow = false
      }, 5000)
    }
    return {
      ...toRefs(state),
      songInfo,
      handleClick,
      handleChangeSong,
      avatar,
      userInfo,
      audioVolumeChanged,
      handleChangeVolume,
      setEnableOrDisableVolume,
      volumeIcon,
      defaultImg,
      percent
    }
  }
}
</script>

<style lang="scss" scoped>
.bbbug_main_menu_song_volume_bar {
  position: absolute !important;
  right: 5px;
  bottom: 123px;
}
.icon-class {
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.bar-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .top {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 200px);
  }
  .bottom {
    .operation {
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      .icon-class {
        font-size: 24px;
      }
    }
  }
  .avatar {
    margin: 0 auto 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .song-pic {
    margin: 10px auto 30px auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    img {
      animation: rotate 10s infinite cubic-bezier(0.2, 0.18, 1, 1);
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -20px;
      margin-top: -20px;
      border-radius: 50%;
    }
  }
  .item {
    cursor: pointer;
    color: #fff;
    user-select: none;
    outline: none;
    &:hover {
      color: hotpink;
      .icon-class {
        color: hotpink;
      }
    }

    .title {
      font-size: 12px;
      margin-top: 10px;
    }
  }
}
</style>